<template>
  <div class="app">
    <div class="login">
      <h2 class=" font-bold text-3xl text-gray-800 h">欢迎登录</h2>
      <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <el-form :model="form"
               ref="LoginRef"
               :rules="LoginRules"
               class="w-[300px] form">
        <!-- 账号 -->
        <el-form-item label="账号"
                      prop="user_name"
                      size="large">
          <el-input v-model="form.user_name"
                    placeholder="请输入账号"
                    :prefix-icon="User"
                    type="text">
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码"
                      prop="password"
                      class="py-4"
                      size="large">
          <el-input v-model="form.password"
                    placeholder="请输入密码"
                    :prefix-icon="Unlock"
                    type="password"
                    show-password>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="w-[250px] bt"
                     round
                     @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { User, Unlock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useCookies } from '@vueuse/integrations/useCookies'
// 登录
import { login } from '@/api/manager.js'
// Vuex 传值
import Store from '@/store'

const form = reactive({
  user_name: 'zhangxiaojue',
  password: '123456'
})
const LoginRules = {
  user_name: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

export default {
  name: 'Login',
  setup () {
    const LoginRef = ref(null)
    // 点击事件
    const onSubmit = () => {
      LoginRef.value.validate(valid => {
        if (!valid) return
        // 登录axios
        login(form.user_name, form.password).then(res => {
          Store.commit('addUser', res.data.result.user_name)
          // 添加会话存储的缓存
          const cookie = useCookies()
          cookie.set('token', res.data.result.token)
          // 跳转到首页
          router.push('/index')
          // 显示弹窗
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 800
          })
        }).catch(err => {
          ElMessage({
            message: err.response.data.message,
            type: 'error',
            duration: 800
          })
        })
      })
    }
    return {
      onSubmit,
      form,
      User,
      Unlock,
      LoginRules,
      LoginRef
    }
  }
}
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/bg.png");
  background-size: cover;
  background-position: center;
  position: relative;
  .login {
    position: absolute;
    top: 350px;
    left: 300px;
    .h {
      text-align: center;
    }
    .form {
      margin: 0 auto;
    }
    .bt {
      margin: 0 auto;
    }
  }
}
</style>